<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title> 表格 </title>
</head>
<body>
	<p> 基础表格，通过 rowspan 实现合并行，colspan 实现合并列 </p>
	<table border="1">
		<tr>
			<td> 姓名 </td> <td> 性别 </td> <td> 年龄 </td> <td> 籍贯 </td> <td> 职业 </td> <td rowspan="4">照片</td>
		</tr>
		<tr>
			<td> 张三 </td> <td> 男 </td> <td> 25 </td> <td> 北京 </td> <td> UI </td>
		</tr>
		<tr>
			<td> 李四 </td> <td> 女 </td> <td> 18 </td> <td> 上海 </td> <td> 测试 </td>
		</tr>
		<tr>
			<td> 徐五 </td> <td> 男 </td> <td> 30 </td> <td> 深圳 </td> <td> 程序员 </td>
		</tr>
		<tr><td> 备注: </td> <td colspan="5"> </td></tr>
	</table>

	<p> 添加标题单元格 </p>  
	<table border="1">
		<tr>
			<!-- 修改这里 -->
			<th> 姓名 </th> <th> 性别 </th> <th> 年龄 </th> <th> 籍贯 </th> <th> 职业 </th>
		</tr>
		<tr>
			<td> 张三 </td> <td> 男 </td> <td> 25 </td> <td> 北京 </td> <td> UI </td>
		</tr>
		<tr>
			<td> 李四 </td> <td> 女 </td> <td> 18 </td> <td> 上海 </td> <td> 测试 </td>
		</tr>
		<tr>
			<td> 徐五 </td> <td> 男 </td> <td> 30 </td> <td> 深圳 </td> <td> 程序员 </td>
		</tr>
		<tr><td> 备注: </td> <td colspan="5"> </td></tr>
	</table>

	<p> 添加表头 thead （显示没变化）</p>
	<table border="1">
		<thead>
			<!-- 修改这里 -->
			<tr>
				<th> 姓名 </th> <th> 性别 </th> <th> 年龄 </th> <th> 籍贯 </th> <th> 职业 </th>
			</tr>
		</thead>
		<tr>
			<td> 张三 </td> <td> 男 </td> <td> 25 </td> <td> 北京 </td> <td> UI </td>
		</tr>
		<tr>
			<td> 李四 </td> <td> 女 </td> <td> 18 </td> <td> 上海 </td> <td> 测试 </td>
		</tr>
		<tr>
			<td> 徐五 </td> <td> 男 </td> <td> 30 </td> <td> 深圳 </td> <td> 程序员 </td>
		</tr>
		<tr><td> 备注: </td> <td colspan="5"> </td></tr>
	</table>

	<p> 添加表脚 tfoot（显示没变化） </p>
	<table border="1">
		<thead>
			<tr>
				<th> 姓名 </th> <th> 性别 </th> <th> 年龄 </th> <th> 籍贯 </th> <th> 职业 </th>
			</tr>
		</thead>
		<tr>
			<td> 张三 </td> <td> 男 </td> <td> 25 </td> <td> 北京 </td> <td> UI </td>
		</tr>
		<tr>
			<td> 李四 </td> <td> 女 </td> <td> 18 </td> <td> 上海 </td> <td> 测试 </td>
		</tr>
		<tr>
			<td> 徐五 </td> <td> 男 </td> <td> 30 </td> <td> 深圳 </td> <td> 程序员 </td>
		</tr>
		<tfoot>
			<!-- 修改这里 -->
			<tr><td> 备注: </td> <td colspan="5"> </td></tr>
		</tfoot>
	</table>

	<p> 添加主体 tbody（显示没变化） </p>
	<table border="1">
		<thead>
			<tr>
				<th> 姓名 </th> <th> 性别 </th> <th> 年龄 </th> <th> 籍贯 </th> <th> 职业 </th>
			</tr>
		</thead>
		<tbody>
			<!-- 修改这里 -->
			<tr>
				<td> 张三 </td> <td> 男 </td> <td> 25 </td> <td> 北京 </td> <td> UI </td>
			</tr>
			<tr>
				<td> 李四 </td> <td> 女 </td> <td> 18 </td> <td> 上海 </td> <td> 测试 </td>
			</tr>
			<tr>
				<td> 徐五 </td> <td> 男 </td> <td> 30 </td> <td> 深圳 </td> <td> 程序员 </td>
			</tr>
		</tbody>
		<tfoot>
			<tr><td> 备注: </td> <td colspan="5"> </td></tr>
		</tfoot>
	</table>

	<p> 提醒：修改 thead、tbody、tfoot的顺序不影响其展示顺序 </p>
	<table border="1">
		<tbody>
			<tr>
				<td> 张三 </td> <td> 男 </td> <td> 25 </td> <td> 北京 </td> <td> UI </td>
			</tr>
			<tr>
				<td> 李四 </td> <td> 女 </td> <td> 18 </td> <td> 上海 </td> <td> 测试 </td>
			</tr>
			<tr>
				<td> 徐五 </td> <td> 男 </td> <td> 30 </td> <td> 深圳 </td> <td> 程序员 </td>
			</tr>
		</tbody>
		<tfoot>
			<tr><td> 备注: </td> <td colspan="5"> </td></tr>
		</tfoot>
		<thead>
			<tr>
				<th> 姓名 </th> <th> 性别 </th> <th> 年龄 </th> <th> 籍贯 </th> <th> 职业 </th>
			</tr>
		</thead>
	</table>

	<p> 添加表格标题 </p>
	<table border="1">
		<caption> 个人信息表 </caption> <!-- 修改这里 -->
		<tbody>
			<tr>
				<td> 张三 </td> <td> 男 </td> <td> 25 </td> <td> 北京 </td> <td> UI </td>
			</tr>
			<tr>
				<td> 李四 </td> <td> 女 </td> <td> 18 </td> <td> 上海 </td> <td> 测试 </td>
			</tr>
			<tr>
				<td> 徐五 </td> <td> 男 </td> <td> 30 </td> <td> 深圳 </td> <td> 程序员 </td>
			</tr>
		</tbody>
		<tfoot>
			<tr><td> 备注: </td> <td colspan="5"> </td></tr>
		</tfoot>
		<thead>
			<tr>
				<th> 姓名 </th> <th> 性别 </th> <th> 年龄 </th> <th> 籍贯 </th> <th> 职业 </th>
			</tr>
		</thead>
	</table>

	<p> 将第一列背景设为灰色，第三列为绿色 </p>
	<table border="1">
		<caption> 个人信息表 </caption> 
		<colgroup span="1" style="background:gray"> </colgroup> <!-- 修改这里 -->
		<colgroup span="1"> </colgroup>	<!-- 修改这里，注意这里要添加一行 -->
		<colgroup span="1" style="background:green"> </colgroup><!-- 修改这里 -->
		<tbody>
			<tr>
				<td> 张三 </td> <td> 男 </td> <td> 25 </td> <td> 北京 </td> <td> UI </td>
			</tr>
			<tr>
				<td> 李四 </td> <td> 女 </td> <td> 18 </td> <td> 上海 </td> <td> 测试 </td>
			</tr>
			<tr>
				<td> 徐五 </td> <td> 男 </td> <td> 30 </td> <td> 深圳 </td> <td> 程序员 </td>
			</tr>
		</tbody>
		<tfoot>
			<tr><td> 备注: </td> <td colspan="5"> </td></tr>
		</tfoot>
		<thead>
			<tr>
				<th> 姓名 </th> <th> 性别 </th> <th> 年龄 </th> <th> 籍贯 </th> <th> 职业 </th>
			</tr>
		</thead>
	</table>

	<p> 使用 col 设置列,将第一列背景设为灰色，第四列为绿色 </p>
	<table border="1">
		<caption> 个人信息表 </caption> 
		<colgroup>
			<col span="1" style="background:gray" > </col>
			<col span="2" > </col>
			<col span="1" style="background:green" > </col>
		</colgroup> <!-- 修改这里 -->
		<tbody>
			<tr>
				<td> 张三 </td> <td> 男 </td> <td> 25 </td> <td> 北京 </td> <td> UI </td>
			</tr>
			<tr>
				<td> 李四 </td> <td> 女 </td> <td> 18 </td> <td> 上海 </td> <td> 测试 </td>
			</tr>
			<tr>
				<td> 徐五 </td> <td> 男 </td> <td> 30 </td> <td> 深圳 </td> <td> 程序员 </td>
			</tr>
		</tbody>
		<tfoot>
			<tr><td> 备注: </td> <td colspan="5"> </td></tr>
		</tfoot>
		<thead>
			<tr>
				<th> 姓名 </th> <th> 性别 </th> <th> 年龄 </th> <th> 籍贯 </th> <th> 职业 </th>
			</tr>
		</thead>
	</table>

</body>
</html>